<template>
  <div class="expense">
    <div class="expenseT">
      <p @click="user">
        <img src="../assets/leftl.png" />
      </p>
      <p>消费记录</p>
      <p></p>
    </div>
    <div style=" background: #fff;">
      <div class="expenseInfo ac bt wn" v-for="(item,index) in moneyInfo" :key="index">
        <div class="col">
          <p>
            <span>消费订单：</span>
            <span>{{item.user_id_link.name}}</span>
          </p>
          <p>{{$tw(new Date(item.created_at), '{y}/{m}/{d} {h}:{i}')}}</p>
        </div>
        <div class="ajc">
          <p>-￥</p>
          <p>{{item.price}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      moneyInfo:[]
    };
  },
  created() {
    this.$parent.showTabbar = false;
    this.$axios({
      url:'common/pay',
      method: 'get'
    }).then(res=>{
      console.log(res)
      if(res.data.code === 200){
        this.moneyInfo = res.data.data
      }
    })
  },
  methods: {
    user() {
      this.$router.push("user");
    }
  }
};
</script>

<style lang='less'>
.expenseT {
  padding: 10px 0;
  display: flex;
  background: linear-gradient(0deg, #e91a0e 0%, #f54822 100%),
    linear-gradient(0deg, #e40805 0%, #e40a07 100%);
  p {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  p:nth-child(1),
  p:nth-child(3) {
    width: 10%;
    img {
      width: 29%;
    }
  }
  p:nth-child(2) {
    width: 80%;
    color: #ffffff;
    font-size: 16px;
  }
}
.expenseInfo {
  background: #fff;
  padding: 15px 0;
  display: flex;
  border-bottom: 1px solid #eee;
  div:nth-child(1) {
    padding-left: 3px;
    width: 70%;
    p:nth-child(1) {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #363636;
      span {
        font-weight: bold;
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #363636;
      }
    }
    p:nth-child(2) {
      color: #636262;
      font-size: 13px;
      padding-top: 8px;
      font-family: AdobeHeitiStd-Regular;
    }
  }
  div:nth-child(2) {
    flex-grow: 1;
    p:nth-child(1) {
      color: red;
      font-size: 20px;
    }
    p:nth-child(2) {
      font-size: 16px;
      font-weight: 500;
    }
    
  }
}
</style>